<template>
	<view class="container">
		<view class="tabList flex">
			<view :class="currentIndex==0 ? 'active' : 'item'" @click="bindItem(0)">我的卡</view>
			<view :class="currentIndex==1 ? 'active' : 'item'" @click="bindItem(1)">我的优惠券</view>
		</view>
		<view class="banner">
			<view class="myCard" v-show="currentIndex == 0">
				<view class="consumeDetail flex-column" v-for="(item,i) in carList" :key='i'>
					<view class="flex-between">
						<view class="black"></view>
						<view class="textDetail flex-cenetr" @click="bindDetail">消费记录</view>
					</view>
					<view class="flex-between">
						<view class="balance">
							<text>余额：</text>
							<text>{{item.balance}}</text>
						</view>
						<view class="limitDate">有效期至{{item.date}}</view>
					</view>
				</view>
			</view>
			<view class="myCoupon" v-show="currentIndex == 1">
				<view class="cardStyle flex-cenetr-around">
					<view class="useItem" @click="bindUse(0)">可使用</view>
					<view class="useItem" @click="bindUse(1)">已使用</view>
					<view class="useItem" @click="bindUse(2)">已过期</view>
				</view>
				<view class="cardList">
					<view class="cardItem" v-show="activeIndex == 0" v-for="(item,index) in couponList" :key='index'>
						<view class="card-top flex-between">
							<view class="card-left flex">
								<view class="card-img"></view>
								<view class="card-text">
									<view class="card-name">{{item.couponName}}</view>
									<view class="card-date">{{item.date}}到期</view>
								</view>
							</view>
							<view class="card-btn flex-cenetr">去使用</view>
						</view>
						<view class="card-bottom">{{item.desc}}</view>
					</view>
					<view class="cardItem" v-show="activeIndex == 1" v-for="(item,index) in couponList" :key='index'>
						<view class="card-top flex-between">
							<view class="card-left flex">
								<view class="card-img"></view>
								<view class="card-text">
									<view class="card-name">{{item.couponName}}</view>
									<view class="card-date">{{item.date}}到期</view>
								</view>
							</view>
							<view class="card-btns flex-cenetr">可使用</view>
						</view>
						<view class="card-bottom">{{item.desc}}</view>
					</view>
					<view class="" v-show="activeIndex == 2">
						已过期
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				currentIndex:0,//一级类目切换索引
				activeIndex:0,//二级类目（我的优惠券）切换索引
				carList:[//我的卡
					{
						'balance':300,
						'date':'2020-10-09'
					},
					{
						'balance':500,
						'date':'2020-08-09'
					}
				],
				couponList:[//我的优惠券
					{
						'couponName':'消费券',
						'date':'2020/20/20 12:39',
						'desc':'全品类红包,会员可用;劲爆低价不可用'
					},
					{
						'couponName':'商品券',
						'date':'2020/20/20 12:39',
						'desc':'部分商品可用;劲爆低价不可用'
					}
				]
			}
		},
		methods:{
			// 我的卡
			bindItem(e){
				console.log(e)
				this.currentIndex =e;
			},
			// 我的优惠券
			bindUse(e){
				this.activeIndex = e;
			},
			// 卡消费记录
			bindDetail(){
				uni.navigateTo({
					url:'../cardDetail/cardDetail'
				})
			}
		}
	}
</script>

<style>
	@import url("../../common/css/iconfont.css");
	@import url("../../common/css/common.css");
	

	.tabList {
		padding: 50rpx 20rpx 40rpx;
	}
	.padding20{
		padding: 0 20rpx;
	}
	.flex {
		display: flex;
		align-items: center;
	}

	.item,.active {
		height: 56rpx;
		line-height: 56rpx;
		position: relative;
		margin-right: 40rpx;
		padding: 0 5rpx;
	}
		
	.active:after {
		content: " ";
		position: absolute;
		left: 0;
		bottom: -10rpx;
		width: 100%;
		height: 0;
		border-top: 8rpx solid red;
	}
	/* 消费记录 */
	.consumeDetail{
		padding: 20rpx;
		height: 240rpx;
		border-radius: 20rpx;
		border: 1px solid #ccc;
		margin-bottom: 40rpx;
	}
	.textDetail{
		width:300rpx;
		height: 70rpx;
		background-color: #ccc;
	}
	.black{
		width: 20rpx;
		height: 10rpx;
	}
	
	/* 我的优惠券 */
	.cardStyle{
		height:60rpx;
		margin-bottom: 40rpx;
	}
	.cardItem{
		margin-bottom: 10rpx;
		padding: 20rpx 20rpx 40rpx 40rpx;
		background-color: rgb(242 242 242);
	}
	.card-top{
		border-bottom: 1px dashed #ccc;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
	.card-left .card-img{
		width:70rpx;
		height:70rpx;
		background-color: #ccc;
		margin-right: 30rpx;
	}
	.flex{
		display: flex;
	}
	.card-btn{
		width: 140rpx;
		height: 55rpx;
		background-color: #42A5FF;
		border-radius: 10rpx;
	}
	.card-btns{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1px solid;
	}
</style>
